// 会议详情
import React, { useEffect } from 'react';
import { observer, useLocalStore } from 'mobx-react-lite';
import { useLocation } from 'react-router';
import { Link } from 'react-router-dom';
import { parse } from 'qs';
import { Layout, Breadcrumb } from 'antd';
import moment from 'moment';
import * as loginApi from '~/apis/login/loginApi';
import { HomeHeader } from '~/components/HomeHeader';
import { HomeSideMenu } from '~/components/HomeSideMenu';
import '../more.sass';
import './index.local.sass';

const { Footer, Content } = Layout;

const MoreDetails = observer(() => {
  const location = useLocation();
  const params = parse(location.search, { ignoreQueryPrefix: true });

  const state = useLocalStore(() => ({
    newsId: params.id || '',
    newsKey: params.key || '1',
    newsInfo: '' as any,
    fileUrlPrefix: '', // 文件地址前缀
    mainPicUrl: '', // 图片
  }));

  const newsDetail = () => {
    loginApi.newsDetail(state.newsId).then((res) => {
      state.newsInfo = res.data ? res.data : null;
      state.fileUrlPrefix = res.file_prefix; // 文件地址前缀
      if (res.data && res.data.mainPicUrl) {
        state.mainPicUrl = `${res.file_prefix as string}${res.data.mainPicUrl as string}`; // 图片
      }
    });
  };

  const eventsDetail = () => {
    loginApi.eventsDetail(state.newsId).then((res) => {
      state.newsInfo = res.data ? res.data : null;
      state.fileUrlPrefix = res.file_prefix; // 文件地址前缀
      if (res.data && res.data.mainPicUrl) {
        state.mainPicUrl = `${res.file_prefix as string}${res.data.mainPicUrl as string}`; // 图片
      }
    });
  };

  const expDetail = () => {
    loginApi.expDetail(state.newsId).then((res) => {
      state.newsInfo = res.data ? res.data : null;
      state.fileUrlPrefix = res.file_prefix; // 文件地址前缀
      if (res.data && res.data.mainPicUrl) {
        state.mainPicUrl = `${res.file_prefix as string}${res.data.mainPicUrl as string}`; // 图片
      }
    });
  };

  const policyDetail = () => {
    loginApi.policyDetail(state.newsId).then((res) => {
      state.newsInfo = res.data ? res.data : null;
      state.fileUrlPrefix = res.file_prefix; // 文件地址前缀
      if (res.data && res.data.mainPicUrl) {
        state.mainPicUrl = `${res.file_prefix as string}${res.data.mainPicUrl as string}`; // 图片
      }
    });
  };

  const doQuery = () => {
    switch (state.newsKey) {
      case '1':
        newsDetail();
        break;
      case '2':
        newsDetail();
        break;
      case '3':
        policyDetail();
        break;
      case '4':
        expDetail();
        break;
      case '5':
        eventsDetail();
        break;
      default:
    }
  };

  useEffect(() => {
    doQuery();
  }, []);

  const newsInfo: any = state.newsInfo;

  return (
    <Layout>
      <HomeSideMenu id={state.newsKey}/>
      <Layout className="site-layout">
        <HomeHeader />
        <Content className="ml-4 mr-4">
          <Breadcrumb className="mt-2 mb-2">
            <Breadcrumb.Item>
              <Link
                to='/login'
                className="no-underline cursor-pointer"
              >
                Login
              </Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <Link
                to='/login/more'
                className="no-underline cursor-pointer"
              >
                News
              </Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <Link
                to='/login/more/details'
                className="no-underline cursor-pointer"
              >
                Details
              </Link>
            </Breadcrumb.Item>
          </Breadcrumb>
          <div>
            <div className='detail-container'>
              <h2>{newsInfo.title ? newsInfo.title : ''}</h2>
              <div className='detail-tag'>
                <span><em>Author: </em> {newsInfo.author} </span>
                <span><em>Country/Region: </em> {newsInfo.countryName ? newsInfo.countryName : ''}</span>
                <span><em>Date: </em> {newsInfo.createTime ? moment(newsInfo.createTime).format('YYYY/MM/DD') : ''}</span>
              </div>
              <img src={ state.mainPicUrl } alt=''/>
              <div className='detail-content'>
                <div dangerouslySetInnerHTML={{ __html: newsInfo.content }}/>
              </div>
            </div>
          </div>
        </Content>
        <Footer className="text-center text-xs text-gray-500"><a type='link'>More</a></Footer>
      </Layout>
    </Layout>
  );
});

export default MoreDetails;
